<template>
  <div>
       <van-nav-bar
          left-text="返回"
          right-text="按钮"
          left-arrow
          :border="false"
          @click-left="leftClick"
      />
    <div class="course_title">
       <h1>{{courseInfo.Cname}}</h1>
       <div class="title_span">
         <span>{{courseInfo.Cprice!=0?'￥'+courseInfo.Cprice:'免费'}}</span> 
         <span>高级</span>
         <span>1小时30分钟</span> 
         <span>{{courseInfo.onlineUser}}人学习</span>
       </div>
    </div>
    <!--  -->
    <van-tabs v-model="activeKIndex">
        <van-tab title="简介">
           <div class="des">
              <h1>简介</h1>
              <div>               
                <img class="des_img" :src="'http://localhost:3000'+courseInfo.Cpic" alt="">
              </div>
              <div>{{courseInfo.Cdescribe}}</div>
           </div>
        </van-tab>
        <van-tab title="目录">
            <dir-com :CDlist="CDlist" :CDid="courseInfo.Id"></dir-com>
        </van-tab>
        <van-tab title="评价">
          <evaluate-com :pjList="evaluate"></evaluate-com>
        </van-tab>
        <van-tab title="推荐">内容 4</van-tab>
      </van-tabs>
      <van-goods-action>
        <van-goods-action-icon icon="star" @click="collect" :color="ifColected?'#ff0000':''" text="收藏"  />
        <van-goods-action-button @click="buy" v-if="courseInfo.Cprice!=0" type="danger" text="立即购买" />
        <van-goods-action-button @click="buy" v-if="courseInfo.Cprice==0" type="danger" text="开始学习" />
      </van-goods-action>
  </div>
</template>
<script>
import dirCom from './dir.vue'
import evaluateCom from './evaluate.vue'
import {loginCourseInfo,getCourseDir,buyCourseApi,CollectionCourse} from '../../api/course'
export default {
  components:{
    dirCom,
    evaluateCom
  },
  created() {
    // 清空总视频
    this.$store.commit("cleartotalvideo");
    //接受课程列表传来的ID
    this.courseId=this.$route.query.ID;
  },
  beforeMount() {
    this.getLoginCourse();
  },
  methods: {
    leftClick(){
      this.$router.go(-1)
    },
    // 调用收藏接口
    async collect(){
       console.log(9999)
        var res=await CollectionCourse(this.courseId,localStorage.userName)
        console.log(res)
        this.ifColected=res.ifColected;
        this.$message.success(res.success)
    },
    // 登录后获取课程信息
    async getLoginCourse(){
      var res=await loginCourseInfo(this.courseId)
      console.log(res)
      // 存储课程评价数据
      this.evaluate=res.data.evaluate.list;
      this.courseInfo=res.data;
      // 获取课程下的目录接口
        //                        课程ID   课程_id
      var cdres=await getCourseDir(this.courseId,this.courseInfo.Id)
      console.log(cdres)
      this.CDlist=cdres.data.list;//目录
    },
    // 购买接口
  async  buy(){
          if(localStorage.userName){
            var res=await buyCourseApi(this.courseId,localStorage.userName)
            console.log(res)
            this.$message.success("购买成功")
            this.$router.push({name:"learn",query:{c_id:this.courseInfo.Id,CDid:this.courseId,Cname:this.courseInfo.Cname}})
          }else{
            this.$message.success("未登录...")
            this.$router.push("/login")
          }
    }
  },
    data(){
      return{
        ifColected:false,
        activeKIndex:0,
        courseId:"",
        CDlist:[],//目录数据
        evaluate:[],//评价数据
        courseInfo:{}
      }
    }
}
</script>
<style lang="less" scoped>
.van-nav-bar{
  background: #24672f;
}
.course_title{
  width: 100%;
  padding: 10px 50px;
  height: 100px;
  background: #24672f;
  line-height: 40px;
  color: white;
}
.des{
  height: 300px;
  background: white;
  margin:10px 0;
  padding: 0 40px;
  box-sizing:border-box;
  h1{
    line-height: 60px;
  }
}
.title_span{
  span{
    margin-left: 10px;
    &:nth-child(1){
      color: red;
    }
  }
}
.des_img{
  width: 70%;
  height: 200px;
  margin: 10px auto;
}
</style>